<template>
  <div class="toolbar">
    <el-tooltip effect="dark" content="展开菜单" placement="bottom">
      <span class="el-icon-s-unfold icon" v-show="isCollapse" @click="COLLAPSE"></span>
    </el-tooltip>
    <el-tooltip effect="dark" content="收缩菜单" placement="bottom">
      <span class="el-icon-s-fold icon" v-show="!isCollapse" @click="COLLAPSE"></span>
    </el-tooltip>
    <FullScreen/>
    <el-tooltip effect="dark" content="刷新页面" placement="bottom">
      <span class="el-icon-refresh-right icon" :class="{'spin':spin}" @click="refresh"></span>
    </el-tooltip>
    <Setting>
      <div slot="setting" class="el-icon-setting icon"></div>
    </Setting>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex';
  import FullScreen from './FullScreen';
  import Setting from './Setting';
  //工具栏
  export default {
    name: "Toolbar",
    data() {
      return {
        spin: false
      }
    },
    computed: {
      ...mapState(['isCollapse']),
    },
    components: {
      FullScreen,
      Setting
    },
    methods: {
      ...mapMutations(['COLLAPSE']),
      //刷新页面
      refresh() {
        this.spin = true;
        setTimeout(() => {
          window.location.reload();
          this.spin = false;
        }, 500)
      }
    },
  }
</script>

<style scoped>
  .icon {
    font-size: 24px;
    cursor: pointer;
    margin-right: 8px;
    /*font-weight: bold;*/
  }

  .toolbar {
    display: flex;
    align-items: center;
  }

  .spin {
    -webkit-animation: spin 1.2s linear infinite;
    animation: spin 1.2s linear infinite;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
      transition: all 1.2s;
    }
  }
</style>
